<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>突出表现/专业技能测评</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta content="A fully featured admin theme which can be used to build CRM, CMS, etc." name="description"/>
    <meta content="Coderthemes" name="author"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <!-- App favicon -->
    <link rel="shortcut icon" href="./assets/images/favicon.ico">

    <!-- App css -->
    <link href="./css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="./css/icons.min.css" rel="stylesheet" type="text/css"/>
    <link href="./css/app.css" rel="stylesheet" type="text/css"/>

    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <style>
        .col-form-label-ljt {
            padding-top: calc(.55rem + 1px);
            padding-bottom: calc(.25rem + 1px);
            margin-left: 16px;
            margin-bottom: 0;
            font-weight: bold;
            font-size: inherit;
            line-height: 1.5;
        }
    </style>
</head>
<body>
<!-- Begin page -->
<div id="wrapper">

    <!-- ========== Left Sidebar Start ========== -->
    <div th:replace="commons/sideBar :: sidebar"/>
    <!-- Left Sidebar End -->

    <div class="content-page">
        <div class="content">

            <!-- TopBar Start -->
            <div th:replace="commons/topBar :: topbar "/>
            <!-- end TopBar -->

            <!-- Start Content-->
            <div class="container-fluid">
                <!-- start page title -->
                <div class="row">
                    <div class="col-12">
                        <div class="page-title-box">
                            <div class="page-title-right">
                                <ol class="breadcrumb m-0">
                                    <li class="breadcrumb-item"><a href="#">首页</a></li>
                                    <li class="breadcrumb-item active">突出表现</li>
                                    <li class="breadcrumb-item active">专业技能</li>
                                </ol>
                            </div>
                            <h4 class="page-title">专业技能</h4>
                        </div>
                    </div>
                </div>
                <!-- end page title -->
            </div>


            <!-- ============================================================== -->
            <!-- Start Page Content here -->
            <!-- ============================================================== -->
            <div class="">
                <div class="card-body">
                    <h4 class="mb-3 header-title">测评内容：</h4>

                    <form class="form-horizontal" method="post" id="professionalForm" >
                        <button class="btn btn-info  " id="add_btn" th:if="${skillsVO.size() == 0}" style="margin-bottom: 10px">添加选项</button>
                        <button class="btn btn-info  " id="add_btn" disabled th:if="${skillsVO.size() != 0}" style="margin-bottom: 10px">添加选项</button>
                        <button class="btn btn-info  " id="del_btn" th:if="${skillsVO.size() == 0}" disabled  style="margin-bottom: 10px;background-color: #ee324d">删除选项 </button>
                        <button class="btn btn-info  " id="del_btn" th:if="${skillsVO.size() != 0}"  style="margin-bottom: 10px;background-color: #ee324d">删除选项 </button>
                        <div id="item">




<!--                                                        <div class="form-group row mb-3 " >-->
<!--                                                            <label  class=" col-form-label-ljt">加分项:</label>-->
<!--                                                            <select name=""   class="form-control selItems"style="width: 200px;  height: 43px;margin-left: 15px" required></select>-->
<!--                                                            <label  class=" col-form-label-ljt">级别:</label>-->
<!--                                                            <select name="" class="form-control selLevels"style="width: 90px;  height: 43px;margin-left: 15px"  required> </select>-->
<!--                                                            <label  class=" col-form-label-ljt">分值:</label>-->
<!--                                                            <select disabled='disabled' name=""  class="form-control selPoints"style="width: 80px;  height: 43px;margin-left: 15px" required></select>-->
<!--                                                            <label  class=" col-form-label-ljt">证明材料:</label>-->
<!--                                                            <div style="width: 190px ;margin-left: 15px">-->
<!--                                                                <input type="file" class="form-control" style="width: 220px;">-->
<!--                                                            </div>&lt;!&ndash;上传图片&ndash;&gt;-->
<!--                                                            <div style="margin-left: 45px;padding-top: 8px">-->
<!--                                                                <span class="badge badge-danger float-right" style="font-size: 12pt">未提交</span>-->
<!--                                                            </div>-->
<!--                                                            <div style="margin-left: 45px;padding-top: 8px">-->
<!--                                                                <i class="fe-trash-2" ></i>-->
<!--                                                            </div>-->
<!--                                                        </div>每一项&ndash;&gt;-->

                        </div>
                        <div class="form-group row mb-3">
                            <label for="subtotal" class="col-1 col-form-label">小计：</label>
                            <div class="col-9">
                                <input disabled="disabled" th:value="${count}" class="form-control" id="subtotal" style="width: 220px;"
                                       placeholder="">
                            </div>
                        </div>
                        <div class="form-group row mb-3">
                            <label for="score" class="col-1 col-form-label">预计得分：</label>
                            <div class="col-9">
                                <input disabled="disabled" th:value="${expectScore}" class="form-control" id="score" style="width: 220px;"
                                       placeholder="">
                            </div>
                        </div>
                        <div class="form-group row mb-3">
                            <label for="score" class="col-1 col-form-label">当前状态：</label>
                            <div class="col-9">
                                <span class="badge badge-secondary badge-pill notSub" style="margin-top: 10px" th:if="${skillsVO.size() == 0 }">未提交</span>
                                <span class="badge  badge-info badge-pill notSub" style="margin-top: 10px" th:if="${ skillsVO.size() != 0   && skillsVO[0].status == 1}">待审核</span>
                                <span class="badge badge-success badge-pill notSub" style="margin-top: 10px" th:if="${skillsVO.size() != 0   && skillsVO[0].status ==2}">审核通过</span>
                                <span class="badge badge-danger badge-pill notSub" style="margin-top: 10px" th:if="${skillsVO.size() != 0   && skillsVO[0].status ==3}">待修改</span>
                            </div>
                        </div>
                        <div class="form-group row mb-3" th:if="${skillsVO.size() != 0 && skillsVO[0].status ==3 }" id="msg">
                            <label for="score" class="col-1 col-form-label" style="color: red">驳回原因：</label>
                            <div class="col-9"  style="padding-top: 8px">
                                <span th:text="${skillsVO[0].msg}"></span>
                            </div>
                        </div>
                        <div class="form-group mb-0 justify-content-end row">
                            <div class="col-12">
                                <button type="submit" id="sb_btn" class="btn btn-info " th:if="${skillsVO.size() == 0 }">提交</button>
                                <button type="submit" id="sb_btn"  disabled class="btn btn-info " th:if="${skillsVO.size() != 0 }">提交</button>
                                <button type="submit" id="reEdit_btn" disabled class="btn btn-danger " th:if="${skillsVO.size() == 0 }">重新编辑</button>
                                <button type="submit" id="reEdit_btn"   class="btn btn-danger " th:if="${skillsVO.size() != 0 && skillsVO[0].status !=2}">重新编辑</button>
                            </div>
                        </div>
                    </form>

                    <!--提交数据显示-->
                    <div class="card-body" id="alreadySubInfo" th:if="${skillsVO.size() != 0}">
                        <h4 class="header-title">已提交加分条目浏览：</h4>
                        <p></p>
                        <table class="table table-dark mb-0 " >
                            <thead>
                            <tr>
                                <th>序号</th>
                                <th>加分项</th>
                                <th>分值</th>
                                <th>证明图片</th>
                            </tr>
                            </thead>
                            <tbody class="layer-photos-demo">
                            <tr th:each="vo,num : ${skillsVO}" >
                                <th scope="row" th:text="${num.count}">1</th>
                                <td th:text="${vo.getItemName()}">高校计算机等级考试一级</td>
                                <td th:text="${vo.getItemScore()}">2</td>
                                <td><div><img  th:src="${vo.getItemImg()}" th:layer-src="${vo.getItemImg()}" width="80px" alt="暂无" height="60px"  layer-src="http://atcrowdfunding-zzp.oss-cn-shenzhen.aliyuncs.com/studentInfoSystem/1/studentHeadImg/a463f41131f546b3a5ecd2aeed401d4e_ba77f3db-1701-49a7-bd67-4f98edd92747.jpg" src="http://atcrowdfunding-zzp.oss-cn-shenzhen.aliyuncs.com/studentInfoSystem/1/studentHeadImg/a463f41131f546b3a5ecd2aeed401d4e_ba77f3db-1701-49a7-bd67-4f98edd92747.jpg" ></div></td>
                            </tr>
                            </tbody>
                        </table>
                    </div>


                </div>
            </div>
        </div>
    </div>
    <!-- ============================================================== -->
    <!-- End Page content -->
    <!-- ============================================================== -->
</div>


<!-- Footer Start -->
<div th:replace="commons/footer :: foot"></div>
<!-- end Footer -->
<script src="./js/jquery-2.1.1.min.js"></script>
<script src="./js/layer/layer.js"></script>

<script>
    // 相册
    layer.photos({
        photos: '.layer-photos-demo'
        ,anim: 1 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
    });
</script>

<!--重新编辑代码逻辑-->
<script>
    $("#reEdit_btn").click(function (e) {
        e.preventDefault();
        // 唤醒添加选项按钮
        $("#add_btn").removeAttr("disabled");
        // 修改当前状态
        $(".notSub").removeClass("badge-info");
        $(".notSub").removeClass("badge-danger");
        $(".notSub").addClass("badge-secondary");
        $(".notSub").text("未提交");
        // 唤醒提交按钮
        $("#sb_btn").removeAttr("disabled");
        // 禁用重新编辑按钮
        $(this).attr("disabled","disabled");
        // 删除已提交加分条目浏览的div
        $("#alreadySubInfo").remove();
        // 清除小计和预计得分
        $("#subtotal").val("0.0");
        $("#score").val("0.0");
        // 发送ajax请求删除已提交的项目
        $.post('/stuInfoSystem/delProfessionalAlreadySub',{},function (data) {

        },'text');
    });

</script>


<script>
    $("#del_btn").hide();

    //计数器
    function itemNum() {
        this.id = 1;
    }

    itemID = new itemNum();

    $("#del_btn").click(function (e) {
        var divItem = "#divItem" + itemID.id;
        // $("#item").remove(divItem);

        e.preventDefault();
        if (itemID.id == 1) {
            $("#del_btn").hide()
            return;
        }
        $(".itemList").last().remove()
        itemID.id = itemID.id - 1;
        if (itemID.id == 1) {
            $("#del_btn").hide()
        }

        addpoint()
    });

    // 添加选项
    $("#add_btn").click(function (e) {

            e.preventDefault(); // 阻止默认行为
            $("#del_btn").show();
            if (itemID.id > 10) {
                layer.msg("最多添加10项");
                return;
            } else {
                $("#item").append("<div class=\"form-group row mb-3 itemList\" id='divItem" + itemID.id + "'>\n" +
                    "                                <label  class=\" col-form-label-ljt\">" + itemID.id + ".加分项:</label>\n" +
                    "                                <select name='addScoreItem-"+itemID.id+"'  class=\"form-control selItems\"style=\"width: 200px;  height: 43px;margin-left: 15px\" required></select>\n" +
                    "                                <label  class=\" col-form-label-ljt\">级别:</label>\n" +
                    "                                <select name='addScoreLevel-"+itemID.id+"'  class=\"form-control selLevels\"style=\"width: 110px;  height: 43px;margin-left: 15px\"  required> </select>\n" +
                    "                                <label  class=\" col-form-label-ljt\">分值:</label>\n" +
                    "                                <select disabled='disabled' name='addPoint-"+itemID.id+"'  id='divSelect" + itemID.id + "' class=\"form-control selPoints\"style=\"width: 80px;  height: 43px;margin-left: 15px\" required></select>\n" +
                    "                                <label  class=\" col-form-label-ljt\">证明材料:</label>\n" +
                    "                                <div style=\"width: 190px ;margin-left: 15px\">\n" +
                    "                                    <input  type=\"file\" class=\"form-control uploadProveImg\" style=\"width: 220px;\">\n" +
                    "                                    <input name='addScoreImgSrc-"+itemID.id+"' type=\"hidden\" >\n" +
                    "                                </div><!--上传图片-->\n" +
                    "                                <div style=\"margin-left: 45px;padding-top: 8px\">\n" +
                    "                                    <span class=\"badge badge-danger isUploadImg float-right\" style=\"font-size: 12pt\">未上传</span>\n" +
                    "                                </div>\n" +
                    "                            </div><!--每一项-->"
                );
                // 每增加一项，计数器加一
                itemID.id = itemID.id + 1;
                // 初始化各个选项
                add_bind_op()
            }
            // 计算小计
            addpoint()

            if (itemID.id == "1") {
                $("#subtotal").val("2");
                $("#score").val("0.5");
            }
        }
    );


    // $(document).delegate(".fe-trash-2", "click", function () {
    //     $(this).parent().parent().remove();
    //     addpoint()
    // });

    // 上传证明图片
    $(document).delegate('.uploadProveImg',"change",function () {

        var formdata = new FormData();
        formdata.append("file", $(this)[0].files[0]);

        var inputObj = $(this).next();
        var statusIcon = $(this).parent().next().children();

        $.ajax({
            type: "POST",
            url: "/stuInfoSystem/uploadProfessionalProve",
            data: formdata,
            contentType: false, // 不设置内容类型
            processData: false, // 不处理数据
            dataType: "text",
            success: function (data) {
                if ("failed" === data) {
                    layer.msg('上传失败,您选择的不是一张图片！', {icon: 5, time: 700});
                    return;
                }
                // 请求成功后要执行的代码
                layer.msg('上传成功!', {icon: 6, time: 700});
               inputObj.val(data);
               statusIcon.removeClass("badge-danger");
               statusIcon.addClass("badge-success");
               statusIcon.text("已上传");
            },
            error: function (data) {
                // 请求失败后要执行的代码
                layer.msg('服务器错误,上传失败!', {icon: 5, time: 700});
            }
        });
    });



    // 确保每个证明都有图片证明
    $("#sb_btn").click(function (e) {
        e.preventDefault();
        var formData = $("#professionalForm").serialize();

        var num = 0;
        $(".isUploadImg").each(function () {
            if($(this).hasClass("badge-danger")){
                num++;
            }
        })
        if (num != 0){
            layer.msg("每个加分项必须提交图片证明！");
            return;
        }
        // alert(itemID.id)
        // if(1==itemID.id){
        //     layer.msg("每个加分项必须提交图片证明！");
        // }
        var defaultData = "addScoreItem-1=''&addScoreLevel-1=无&addScoreImgSrc-1=''"
        if(formData==""){
            formData = defaultData;
        }
        //alert(formData)

        // 上传整个表单信息
        $.post('/stuInfoSystem/uploadProfessionalInfo',formData,function (data) {

            // 提交表单成功
            $(".notSub").removeClass("badge-secondary");
            $(".notSub").addClass("badge-info");
            $(".notSub").text("待审核");

            // 刷新页面
            location.href='';


        },"text");
    });


</script>


<!-- App js -->
<script src="./js/vendor.js"></script>
<script src="./js/app.js"></script>


<!-- Plugins js -->
<script src="./js/vendor/Chart.bundle.js"></script>
<script src="./js/vendor/jquery.sparkline.min.js"></script>
<script src="./js/vendor/jquery.knob.min.js"></script>

<script src="./js/pages/dashboard.init.js"></script>

<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="js/outstands/professionalSelectLinkage.js"></script>

</body>
</html>